<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :model="searchForm">
        <el-row>
          <el-input size="large" placeholder="请输入搜索内容" v-model="searchForm.searchKey" clearable>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-row>
      </el-form>
      <div class="main">
        <ul class="song">
          <li v-for="son in result.song">
            <p>
              {{son.songname}} -- {{son.artistname}}
              <i class="el-icon-video-play" @click="loadAndPlay(son)"></i>
            </p>
            <p v-show="son.info" class="info">{{son.info}}</p>
          </li>
        </ul>
      </div>
      <div class="footer" v-if="playSong">
        <p>
          <a class="download" v-if="playUrl" target="_blank" :href="playUrl">
            <span class="songName">{{playSong.songName}}</span>
          </a>
          -- <span class="artistName">{{playSong.artistName}}</span>
          <span class="albumName"><<{{playSong.albumName}}>></span>

          <a class="lrc" v-if="playSong.lrcLink" target="_blank" :href="playSong.lrcLink">
            <span>[ 歌词 ]</span>
          </a>
        </p>
        <audio v-if="playUrl" :src="playUrl" controls="controls" autoplay></audio>
      </div>
    </div>
  </div>
</template>

<script>
  import baidu from '@/api/admin/music/baidu' //调用模块接口
  export default {
    name: "Baidu",
    data() {
      return {
        searchForm: {
          searchKey: ''
        },
        result: {
          song: [],
          album: [],
          artist: []
        },
        // result: {
        //     "song": [{
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "1881099",
        //         "songname": "天涯",
        //         "resource_type": "0",
        //         "songid": "467875",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "0",
        //         "artistname": "任贤齐",
        //         "info": "电视剧《笑傲江湖（2000年台湾中视版）》片尾曲",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "04081D655EC5085B8F9910"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "98099",
        //         "songname": "天涯三唱",
        //         "copy_type": 1,
        //         "resource_type": "0",
        //         "encrypted_songid": "",
        //         "has_mv": "0",
        //         "resource_type_ext": "0",
        //         "info": "",
        //         "yyr_artist": "1",
        //         "control": "0000000000",
        //         "artistname": "墨明棋妙",
        //         "is_skip_yyr": "0",
        //         "resource_provider": "1",
        //         "songid": "74121806",
        //         "yyr_song_id": "302806"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"129|-1\",\"1\":\"-1|-1\"}",
        //         "weight": "54099",
        //         "songname": "天涯相随",
        //         "resource_type": "0",
        //         "songid": "1095285",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "2",
        //         "artistname": "筠子",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "09081D67A7820859C23F45"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "46099",
        //         "songname": "天涯歌女",
        //         "resource_type": "0",
        //         "songid": "7887758",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "0",
        //         "artistname": "周华健",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "42081D7254310858DE4A69"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"129|-1\",\"1\":\"-1|-1\"}",
        //         "weight": "26099",
        //         "songname": "天涯歌女",
        //         "resource_type": "0",
        //         "songid": "770467",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "2",
        //         "artistname": "蔡琴",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "64081D652E470859B0D6F9"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "20099",
        //         "songname": "天涯落成空",
        //         "copy_type": 1,
        //         "resource_type": "0",
        //         "encrypted_songid": "",
        //         "has_mv": "0",
        //         "resource_type_ext": "0",
        //         "info": "",
        //         "yyr_artist": "1",
        //         "control": "0000000000",
        //         "artistname": "W.K.",
        //         "is_skip_yyr": "0",
        //         "resource_provider": "1",
        //         "songid": "74060716",
        //         "yyr_song_id": "241716"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "18099",
        //         "songname": "天涯歌女",
        //         "resource_type": "0",
        //         "songid": "120979422",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "0",
        //         "artistname": "群星",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "3607735ffde09584f744fL"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"129|-1\",\"1\":\"-1|-1\"}",
        //         "weight": "17099",
        //         "songname": "天涯歌女",
        //         "resource_type": "0",
        //         "songid": "109070544",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "2",
        //         "artistname": "陈艺鹏",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "71081DE3E50C085C39B711"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "10099",
        //         "songname": "天涯情歌",
        //         "resource_type": "0",
        //         "songid": "522843839",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "0",
        //         "artistname": "夏兰",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": "88081F29F6BE085881D0E5"
        //     }, {
        //         "bitrate_fee": "{\"0\":\"0|0\",\"1\":\"0|0\"}",
        //         "weight": "8099",
        //         "songname": "天涯歌女",
        //         "resource_type": "0",
        //         "songid": "610587287",
        //         "has_mv": "0",
        //         "copy_type": 1,
        //         "yyr_artist": "0",
        //         "resource_type_ext": "0",
        //         "artistname": "林宝",
        //         "info": "",
        //         "resource_provider": "1",
        //         "control": "0000000000",
        //         "encrypted_songid": ""
        //     }],
        //     "album": [{
        //         "albumname": "天涯情歌",
        //         "weight": "100",
        //         "artistname": "夏兰",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/ee9ef91d738ac91f28dae6474cbf049a\/522843836\/522843836.jpg@s_2,w_40,h_40",
        //         "albumid": "522843836"
        //     }, {
        //         "albumname": "天涯",
        //         "weight": "20",
        //         "artistname": "爱乐团",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/music\/D04E76D531FA9223A077BEFEA3BD691A\/252734202\/252734202.jpg@s_2,w_40,h_40",
        //         "albumid": "14953206"
        //     }, {
        //         "albumname": "天涯海角也会一路顺风",
        //         "weight": "20",
        //         "artistname": "马旭成",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/2009091c9211910203d3259410a02369\/601809477\/601809477.jpg@s_2,w_40,h_40",
        //         "albumid": "15566034"
        //     }, {
        //         "albumname": "天涯路",
        //         "weight": "20",
        //         "artistname": "非凡组合",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/120951822\/120951822.jpg@s_2,w_40,h_40",
        //         "albumid": "120953285"
        //     }, {
        //         "albumname": "天涯路",
        //         "weight": "10",
        //         "artistname": "陈象",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/124531595\/124531595.jpg@s_2,w_40,h_40",
        //         "albumid": "124531611"
        //     }, {
        //         "albumname": "天涯过客 钢琴曲",
        //         "weight": "0",
        //         "artistname": "琴键狂舞",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/default_album.jpg@s_2,w_40,h_40",
        //         "albumid": "611656476"
        //     }, {
        //         "albumname": "天涯明月刀",
        //         "weight": "0",
        //         "artistname": "高翔",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/fa61840eeb1dabfa4a9bcd995715d6a3\/522858800\/522858800.jpg@s_2,w_40,h_40",
        //         "albumid": "611645693"
        //     }, {
        //         "albumname": "天涯明月刀",
        //         "weight": "0",
        //         "artistname": "锦音江山",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/default_album.jpg@s_2,w_40,h_40",
        //         "albumid": "611649948"
        //     }, {
        //         "albumname": "《天涯明月刀OL》独立寒江•曲无忆",
        //         "weight": "0",
        //         "artistname": "小爱的妈",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/default_album.jpg@s_2,w_40,h_40",
        //         "albumid": "611641796"
        //     }, {
        //         "albumname": "秦时明月·终悔",
        //         "weight": "0",
        //         "artistname": "天涯之水",
        //         "resource_type_ext": "0",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/default_album.jpg@s_2,w_40,h_40",
        //         "albumid": "611656475"
        //     }],
        //     "artist": [{
        //         "yyr_artist": "1",
        //         "artistname": "天涯行歌",
        //         "artistid": "110985078",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/default_artist.jpg@s_2,w_48,h_48",
        //         "weight": "0"
        //     }, {
        //         "yyr_artist": "0",
        //         "artistname": "望海天涯",
        //         "artistid": "340507237",
        //         "artistpic": "http:\/\/qukufile2.qianqian.com\/data2\/pic\/a0d314f439ff874b064756c7cedef868\/613131582\/613131582.jpg@s_2,w_48,h_48",
        //         "weight": "1"
        //     }]
        // },
        playSong: '',
        // playSong: {
        //     "queryId": "467875",
        //     "status": 0,
        //     "songId": 467875,
        //     "songName": "\u5929\u6daf",
        //     "artistId": "119",
        //     "artistName": "\u4efb\u8d24\u9f50",
        //     "albumId": 66883,
        //     "albumName": "\u4e3a\u7231\u8d70\u5929\u6daf",
        //     "lrcLink": "http:\/\/qukufile2.qianqian.com\/data2\/lrc\/54e5ffbad7b0cb82108b62a14d854c3b\/603437615\/603437615.lrc",
        //     "time": 326,
        //     "linkCode": 22000,
        //     "linkinfo": null,
        //     "version": "",
        //     "copyType": 1,
        //     "enhancement": "3.139999",
        //     "songLink": "http:\/\/zhangmenshiting.qianqian.com\/data2\/music\/ab0af25214d76791f4d45efa1310f745\/599546057\/599546057.mp3?xcode=89526a22161c9a1ce977ca24e3730051",
        //     "showLink": "http:\/\/zhangmenshiting.qianqian.com\/data2\/music\/ab0af25214d76791f4d45efa1310f745\/599546057\/599546057.mp3?xcode=89526a22161c9a1ce977ca24e3730051",
        //     "format": "mp3",
        //     "rate": 128,
        //     "size": 5232717,
        //     "format_arr": {
        //         "mp3": {
        //             "songLink": "http:\/\/zhangmenshiting.qianqian.com\/data2\/music\/ab0af25214d76791f4d45efa1310f745\/599546057\/599546057.mp3?xcode=89526a22161c9a1ce977ca24e3730051",
        //             "showLink": "http:\/\/zhangmenshiting.qianqian.com\/data2\/music\/ab0af25214d76791f4d45efa1310f745\/599546057\/599546057.mp3?xcode=89526a22161c9a1ce977ca24e3730051",
        //             "format": "mp3",
        //             "rate": 128,
        //             "size": 5232717
        //         }
        //     }
        // },
        playUrl: ''
      }
    },
    computed: {},
    mounted() {
    },
    methods: {
      search() {
        let that = this;
        if (!that.searchForm.searchKey) {
          return;
        }
        console.log('search' + that.searchForm.searchKey);
        baidu.search(that.searchForm).then(res => {
          console.log(res);
          res = JSON.parse(res.data.rs);
          if (!res.errno) {
            that.result = res.data;
          } else {
            that.result = {
              song: [],
              album: [],
              artist: []
            }
          }
        });
      },
      loadAndPlay(song) {
        console.log(song);
        let that = this;

        baidu.detail({songIds: song.songid}).then(res => {
          console.log(res);
          res = JSON.parse(res.data.rs);
          let data = res.data.songList[0];
          if (data) {
            that.playSong = data;
            that.playUrl = '';
            that.playUrl = baidu.proxy + '&url=' + encodeURIComponent(data.songLink) + '&name=' + encodeURIComponent(data.songName);
          }
        });
      }
    }

  }
</script>

<style scoped>

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    border-bottom: 1px solid #f1f1f1;
  }

  li + li {
    margin-top: 10px;
  }

  .song .info {
    font-size: 0.8em;
    color: #666;
  }

  .song i {
    font-size: 1.2em;
  }

  .footer .songName {
    font-weight: bold;
  }

  .footer .artistName {
    color: #666;
  }

  .footer .albumName {
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    margin-left: 1em;
  }

  .footer audio {
    width: 100%;
  }


</style>
